<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>02-class选择器-练习02</title>
    <style>
        .sure {
            background-color: #53A93F;
            color: #fff;
            font-size: 18px;
            /* 内边距 */
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            /*
            设置鼠标样式（鼠标移动到元素上时显示的样子）
             cursor: pointer是一只小手的样式
             */
            cursor: pointer;
        }

        .delete {
            background-color: #D73D32;
            color: #fff;
            font-size: 18px;
            /* 内边距 */
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            /* 圆角半径 */
            border-radius: 5px;
            /*
            设置鼠标样式（鼠标移动到元素上时显示的样子）
             cursor: pointer是一只小手的样式
             */
            cursor: pointer;
        }

        .reset {
            background-color: #F6C12A;
            color: #fff;
            font-size: 18px;
            /* 内边距 */
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            /* 圆角半径 */
            border-radius: 5px;
            /*
            设置鼠标样式（鼠标移动到元素上时显示的样子）
             cursor: pointer是一只小手的样式
             */
            cursor: pointer;
        }

        .cancel {
            background-color: #57B5E3;
            color: #fff;
            font-size: 18px;
            /* 内边距 */
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            /*
            设置鼠标样式（鼠标移动到元素上时显示的样子）
             cursor: pointer是一只小手的样式
             */
            cursor: pointer;
        }
    </style>
</head>
<body>

<br>
<br>
<br>
<br>
<br>

<span class="sure">确定</span>

<span class="delete">删除</span>

<span class="reset">重置</span>

<span class="cancel">取消</span>

</body>
</html>